<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <uni-list style="margin: 10px" :border="true" v-for="(item,index) in dataList" :key="index">
     <!-- 自定义右侧内容 -->
      <uni-list-chat :title="item.artifactName" :avatar="formatUrl(item.photoUrl)" :note="item.createTime">
        <view class="chat-custom-right">
          <uni-icons type="star-filled" color="red" size="48" @click="handleCancelFavorite(item.favoriteId)"></uni-icons>
        </view>
      </uni-list-chat>
    </uni-list>
  </z-paging>
</template>

<script>
import { listFavorite,delFavorite } from '@/api/system/favorite.js';
import config from '@/config';

export default {
  data() {
    return {
      dataList: [], // 初始相册列表
    };
  },
  mounted() {

  },
  methods: {
    queryList(pageNo, pageSize) {
      let queryParams = {
        pageNum: pageNo,
        pageSize: pageSize
      }
      // 此处请求仅为演示，请替换为自己项目中的请求
      listFavorite(queryParams).then(res => {
        // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
        this.$refs.paging.complete(res.rows);
      })
    },
    formatUrl(url) {
      return config.baseUrl + url
    },
    handleCancelFavorite(id) {
      delFavorite(id).then(response => {
        uni.showToast({
          title: '取消收藏成功',
          icon: 'none'
        })
        this.$refs.paging.reload();
      }).catch(error => {
        uni.showToast({
          title: '取消收藏失败:'+error.msg,
          icon: 'none'
        })
      })
    }
  },
};
</script>


<style scoped>
.u-demo-block{
  margin: 20px;
}

.album-container {
  height: 100%; /* 根据需要调整高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.u-page {
  padding: 20rpx;
}

.album {
  padding: 40rpx;
  background-color: ghostwhite;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.album__avatar {
  margin-right: 20rpx;
}

.album__content {
  flex: 1;
}

.loading-more,
.no-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
}
</style>
